<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>

<body>
    <div class="home-app dpflex fdcolumn">
        <!-- 轮播 -->
        <div class="banner">
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="../imgs/course-img03.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="../imgs/course-img04.jpg" alt=""></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
        </div>


        <!-- 展示 -->
        <div class="show dpflex flex1">
            <div class="first dpflex">
                <div class="one">
                    <p>今日排名</p>
                    <img src="../imgs/index-card-rank.png" alt="">
                    <h3 id="rank">x</h3>
                </div>
                <div class="two">
                    <p>累计打卡<a id="punchDay">xx</a>天</p>
                    <img src="../imgs/index-card-sum.png" alt="">
                    <span id="todayPunch">今日打卡</span>
                </div>
            </div>
            <div class="second dpflex">
                <div class="three" id="motionData">
                    <p>运动数据</p>
                </div>
                <div class="four">
                    <p>累计运动徽章</p>
                    <img src="../imgs/index-card-badge.png" alt="">
                    <span><span id="badge">x</span>枚</span>
                </div>
            </div>
            <div class="five" id="train">
                <p>课程训练</p>
            </div>
            <div class="six">
                <p>户外跑步</p>
            </div>

        </div>
    </div>
</body>

</html>